<template>
  <div>
    <div class="fanhui" @click="fanhui">返回</div>
    <div class="wenzi">手机号注册</div>
    <!-- 写手机号的input框 -->
    <div class="shojihao">
      
      <input
        type="text"
        placeholder="+86 ：请输入您的手机号"
        v-model="mobile"
        id="phone"
        :active="flag1"
        @blur="checkphone"
      />
    </div>
    <!-- 写验证码 -->
    <div class="yzm">
      <input type="text" placeholder="请输入验证码" v-model="yzmval" />
      <button @click="hqyzm">获取验证码</button>
    </div>

    <!-- 下一步 -->
    <div class="xiayibu" @click="xiayibu">下一步</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
      flag1:false,
      nickName:"",
    };
  },
  methods: {
    fanhui() {
      this.$router.push("./login");
    },
    checkphone() {
      var phone = document.getElementById("phone").value;
      if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(phone)) {
        alert("手机号码有误，请重新再输入一次");
      } else {
        console.log("value", phone);
        this.flag1 =true;
      }
    },
    //输入手机号发送验证码
    hqyzm() {
      fetch("http://www.pudge.wang:4000/register/getCode", {
        method: "POST",
        body: JSON.stringify({
          phone: this.mobile,
          templateId: "537707"
        }),
        headers: new Headers({ "Content-Type": "application/json" }),
      })
        .then((response) => response.json())
        .then((res) => {
          if (res.status === 0) {
            console.log(res);
          }
        });
    },
   
    xiayibu(){
       if(!this.flag1){
          alert('请输入正确的手机号码格式')
       } else if(this.yazval){
         alert('验证码不能为空')
       } else{
          this.$router.push('./login')
       }
    },
    
  },
};
</script>

<style lang="less" scoped>
.fanhui {
  margin-top: 20px;
  margin-left: 14px;
  color: #77dfdf;
  font-size: 15px;
  height: 40px;
}
.wenzi {
  text-align: center;
  font-size: 25px;
  color: #605e62;
  margin-bottom: 50px;
}
.shojihao {
  display: flex;
  width: 90%;
  margin: auto;
  margin-bottom: 20px;
 
  input {
    display: block;
    width: 100%;
    height: 46px;
     padding-left:10px;
    border-radius: 5px;
    border: 1px solid #605e62;
  }
}
.yzm {
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 90%;

  input {
    width: 162px;
    height: 45px;
    border: 1px solid #605e62;
    border-radius: 5px;
    text-indent: 10px;
  }
  button {
    display: block;
    width: 131px;
    height: 45px;
    border-radius: 5px;
    color: #605e62;
  }
}

.xiayibu {
  width: 90%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  margin: auto;
  margin-top: 60px;
  color: #fff;
  font-size: 17px;
  background: #68dcdc;
}
</style>
